<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p><Back></Back>积分商城</p>
    </header>

    <!-- 积分展示部分 -->
    <div class="point-container">
      <div class="point-title">我的积分</div>
      <div class="point-amount">{{ pointValue }}</div>
    </div>

    <!-- 商品列表 -->
    <div class="gift-container">
      <div class="gift-header">
        <span>礼品兑换</span>
      </div>
      <div class="gift-list">
        <div v-for="(item, index) in giftList" :key="index" class="gift-item">
          <div class="gift-img">
            <img :src="item.imgUrl" alt="礼品图片">
          </div>
          <div class="gift-info">
            <h3>{{ item.name }}</h3>
            <p class="gift-desc">{{ item.desc }}</p>
            <div class="gift-bottom">
              <p class="gift-point">{{ item.pointValue }}积分</p>
              <button class="exchange-btn" @click="exchangeGift(item)" :disabled="pointValue < item.pointValue">兑换</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分记录 -->
    <div class="point-record-container">
      <div class="record-header">
        <span>积分记录</span>
      </div>
      <div class="record-list" v-if="pointTransList.length > 0">
        <div v-for="(item, index) in pointTransList" :key="index" class="record-item">
          <div class="record-left">
            <p class="record-title">{{ item.type === 'ADD' ? '积分收入' : '积分支出' }}</p>
            <p class="record-time">{{ formatTime(item.createTime) }}</p>
          </div>
          <div :class="['record-amount', item.type === 'ADD' ? 'income' : 'expense']">
            {{ item.type === 'ADD' ? '+' : '-' }}{{ item.amount }}
          </div>
        </div>
      </div>
      <div class="empty-list" v-else>
        <p>暂无积分记录</p>
      </div>
    </div>
    
    <!-- 底部菜单 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Back from '../components/Back.vue';
import Footer from '../components/Footer.vue';

export default {
  name: 'PointMall',
  components: {
    Back,
    Footer
  },
  data() {
    return {
      user: null,
      pointValue: 0,
      pointTransList: [],
      giftList: [
        {
          id: 1,
          name: '50元代金券',
          desc: '可在平台消费时抵扣50元',
          pointValue: 500,
          imgUrl: 'https://img.icons8.com/color/144/000000/gift-card.png'
        },
        {
          id: 2,
          name: '100元代金券',
          desc: '可在平台消费时抵扣100元',
          pointValue: 1000,
          imgUrl: 'https://img.icons8.com/color/144/000000/voucher.png'
        },
        {
          id: 3,
          name: '精美保温杯',
          desc: '304不锈钢材质，保温效果好',
          pointValue: 2000,
          imgUrl: 'https://img.icons8.com/color/144/000000/thermos.png'
        },
        {
          id: 4,
          name: '蓝牙耳机',
          desc: '高音质无线蓝牙耳机',
          pointValue: 3000,
          imgUrl: 'https://img.icons8.com/color/144/000000/earbud-headphones.png'
        }
      ]
    };
  },
  created() {
    // 获取用户信息
    this.user = this.$getSessionStorage('user');
    if (!this.user) {
      alert('请先登录');
      this.$router.push({ path: '/login' });
      return;
    }
    
    // 获取积分
    this.getPointValue();
    
    // 获取积分记录
    this.getPointTransactions();
  },
  methods: {
    // 获取积分值
    getPointValue() {
      let url = `PointController/getValueById/${this.user.userId}`;
      this.$axios.get(url).then(response => {
        if (response.data.code === 200) {
          this.pointValue = response.data.result;
        } else {
          alert('获取积分失败');
        }
      }).catch(error => {
        console.error('获取积分失败', error);
      });
    },
    
    // 获取积分交易记录
    getPointTransactions() {
      let url = 'PointController/getPointTrans';
      this.$axios.get(url, {
        params: {
          userId: this.user.userId,
          index: 0
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.pointTransList = response.data.result || [];
        } else {
          alert('获取积分记录失败');
        }
      }).catch(error => {
        console.error('获取积分记录失败', error);
      });
    },
    
    // 兑换礼品
    exchangeGift(gift) {
      if (this.pointValue < gift.pointValue) {
        alert('积分不足');
        return;
      }
      
      if (confirm(`确认使用${gift.pointValue}积分兑换"${gift.name}"吗？`)) {
        this.$axios.post(`PointController/exchange/${this.user.userId}/${gift.pointValue}`).then(response => {
          if (response.data.code === 200) {
            alert('兑换成功');
            // 刷新积分和记录
            this.getPointValue();
            this.getPointTransactions();
          } else {
            alert('兑换失败: ' + response.data.message);
          }
        }).catch(error => {
          console.error('兑换失败', error);
          alert('兑换失败，请稍后重试');
        });
      }
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`;
    },
    
    padZero(num) {
      return num < 10 ? `0${num}` : num;
    }
  }
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding-bottom: 14vw; /* 为底部菜单留出空间 */
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 积分展示部分 ******************/
.point-container {
  margin-top: 16vw;
  padding: 6vw 4vw;
  background-color: #0097FF;
  color: #fff;
  text-align: center;
}

.point-title {
  font-size: 4vw;
  margin-bottom: 2vw;
}

.point-amount {
  font-size: 8vw;
  font-weight: bold;
}

/****************** 商品列表 ******************/
.gift-container {
  margin-top: 4vw;
  background-color: #fff;
  border-radius: 8px;
  margin-left: 4vw;
  margin-right: 4vw;
  padding: 4vw;
}

.gift-header {
  padding-bottom: 3vw;
  border-bottom: 1px solid #f0f0f0;
}

.gift-header span {
  font-size: 4.5vw;
  font-weight: bold;
  color: #333;
}

.gift-list {
  margin-top: 2vw;
}

.gift-item {
  display: flex;
  padding: 3vw 0;
  border-bottom: 1px solid #f5f5f5;
}

.gift-img {
  width: 25vw;
  height: 25vw;
  margin-right: 3vw;
}

.gift-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gift-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gift-info h3 {
  font-size: 4vw;
  color: #333;
  margin: 0;
  margin-bottom: 1vw;
}

.gift-desc {
  font-size: 3.5vw;
  color: #666;
  margin: 0;
  margin-bottom: 2vw;
  flex: 1;
}

.gift-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gift-point {
  font-size: 3.8vw;
  color: #FF5252;
  margin: 0;
}

.exchange-btn {
  background-color: #0097FF;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 1.5vw 3vw;
  font-size: 3.5vw;
}

.exchange-btn:disabled {
  background-color: #ccc;
}

/****************** 积分记录 ******************/
.point-record-container {
  margin-top: 4vw;
  background-color: #fff;
  border-radius: 8px;
  margin-left: 4vw;
  margin-right: 4vw;
  padding: 4vw;
  margin-bottom: 4vw;
}

.record-header {
  padding-bottom: 3vw;
  border-bottom: 1px solid #f0f0f0;
}

.record-header span {
  font-size: 4.5vw;
  font-weight: bold;
  color: #333;
}

.record-list {
  margin-top: 2vw;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vw 0;
  border-bottom: 1px solid #f5f5f5;
}

.record-left {
  flex: 1;
}

.record-title {
  font-size: 4vw;
  color: #333;
  margin-bottom: 1vw;
  margin: 0;
}

.record-time {
  font-size: 3vw;
  color: #999;
  margin: 0;
}

.record-amount {
  font-size: 4.5vw;
  font-weight: bold;
}

.record-amount.income {
  color: #38CA73;
}

.record-amount.expense {
  color: #FF5252;
}

.empty-list {
  text-align: center;
  padding: 10vw 0;
  color: #999;
}
</style>
